<template>
  <div>
    <div class="cash-box">
      <div class="item-cash-title">
        <span class="title-icon"></span>奖励积分审核
      </div>
    </div>
    <div class="search-nav-box"></div>
    <div class="bgcw">
      <div class="item-search">
        <div id="jhTable" class="socialTitle_box">
          <ul class="checkTab fl">
            <template v-for="(item,index) in tabs">
              <!-- 消息的气泡 -->
              <el-badge
                :value="totalNum"
                :hidden="item.label != '待审核' || totalNum== 0"
                :max="99"
                class="item"
                :key="index"
              >
                <li
                  :key="item.value"
                  v-html="item.label"
                  :class="{'active':current===item.value}"
                  @click="clickTab(item,item.value)"
                ></li>
              </el-badge>
            </template>
          </ul>
          <!-- <div class="fr import" v-show="current==='0'">
        <el-button round icon="el-icon-download" style="color:#0064e4;border-color:#0064e4" @click="importData()">导出</el-button>
          </div>-->
          <el-table :data="tableData" stripe style="width: 100%" border="" v-loading="loading">
            <template v-for="item in tableColumn">
              <el-table-column
                :key="item.value"
                v-if="item.value!=='opt'"
                :prop="item.value"
                :label="item.label"
                align="center"
              ></el-table-column>
              <!-- <el-table-column
                :key="item.value"
                v-else-if="item.value=='usenum'"
                :label="item.label"
                min-width="90px"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{scope.row.usenum}}</span>
                </template>
              </el-table-column>-->
              <!-- <el-table-column
            v-else-if="item.value=='opt'"
            label="操作"
            align="center"
          >
            <span>退款</span>
              </el-table-column>-->

              <el-table-column
                :key="item.value"
                label="操作"
                align="center"
                v-else-if="item.value=='opt'"
              >
                <!-- <template slot-scope="scope">
              <span v-if="current == 0">未处理</span>
              <span v-if="current == 1">已处理</span>
              <span v-if="current == 2">已处理</span>
                </template>-->

                <template slot-scope="scope">
                  <el-button
                    v-if="current==='1' "
                    @click="check(scope.row)"
                    type="text"
                    size="small"
                  >
                    <!-- 消息的气泡 -->
                    <el-badge is-dot class="item">审核</el-badge>
                  </el-button>
                  <el-button
                    v-else-if="current==='2'||current==='3'||current==='4'"
                    @click="details(scope.row)"
                    type="text"
                    size="small"
                  >详情</el-button>
                  <!-- <el-button v-else @click="handleClick(scope.row)" type="text" size="small">详情</el-button> -->
                </template>
              </el-table-column>
            </template>
          </el-table>
          <div class="pageBox">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pageChange"
              :current-page="Page.pageNum"
              :page-sizes="[10,20, 30, 50,100]"
              :page-size="Page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Page.total"
              background=""
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="checkFlag" width="980px" custom-class="jhdialog">
      <!-- ============================================= -->
      <!-- 弹出框里放入check方法，来显示自己要显示的弹出框 -->
      <!-- ============================================= -->
      <!-- 给这个  check  这个页面传入这个  companyType  这个属性 -->
      <!--企业信息  type（tindex）  是 1 ，  优质企业  type（tindex）  是 2  ， 知名企业  type（tindex）  是 3  ， 岗位管理  type（tindex）  是4  -->
      <!-- ==================================================================================== -->
      <!-- // 点击切换 待审核   已通过   未审核的时候 把  item.status赋值给当前date里面的current这个属性 -->
      <!-- ======================================================================================= -->
      <!-- // 给了这个current  一个 0，  1 ，  2 这三个 值里面的一个 -->
      <!-- // 企业信息  type  是 1 ，  优质企业  type  是 2  ， 知名企业  type  是 3  ， 岗位管理  type  是4  -->
      <!-- :companyId="info.companyid" -->
      <!-- :companyName="info.companyName" -->
      <check
        v-if="checkFlag"
        :companyName="info.companyname"
        :companyId="info.companyid"
        :tabNum="current"
        :companyArea="info.areaName+info.address"
        :companyType="info.companyType"
        :companyScale="info.companyScale"
        :linkman="info.linkman"
        :telnum="info.telnum"
        :buslicenseid="info.buslicenseid"
        :companyemail="info.companyemail"
        :legalperson="info.legalperson"
        :linkphone="info.linkphone"
        :introduction="info.introduction"
        :checkPicture="info.logo"
        :industrytype="info.industrytype"
        :bid="info.bid"
        @cancelCheck="close"
      ></check>
    </el-dialog>
  </div>
  <!-- </div> -->
</template>

<script>
import check from "./check.vue";
export default {
  components: {
    // ==============================================
    // 挂载这个check
    // ==============================================
    check
  },
  props: ["totalNum"],
  data() {
    return {
      loading:false,
      checkHuman: "",
      companyScaleList: [],
      companyTypeList: [],
      current: "1",
      tabs: [
        { label: "待审核", value: "1" },
        { label: "已通过", value: "2" },
        { label: "未通过", value: "3" },
        { label: "已失效", value: "4" }
      ],
      tableData: [],
      tableColumn: [],
      // 页码数
      Page: {
        total: 10,
        pageNum: 1,
        pageSize: 10
      },
      columnObj: {
        "1": [
          { label: "企业名称", value: "companyname" },
          { label: "所在地区", value: "areaName" },
          { label: "企业类型", value: "companyType" },
          { label: "企业规模", value: "companyScale" },
          { label: "申请时间", value: "submittime" },
          { label: "操作", value: "opt" }
        ],
        "2": [
          { label: "企业名称", value: "companyname" },
          { label: "所在地区", value: "areaName" },
          { label: "企业类型", value: "companyType" },
          { label: "企业规模", value: "companyScale" },
          { label: "奖励金发放额度", value: "bounty" },
          { label: "审核人", value: "auditor" },
          { label: "审核时间", value: "submittime" },
          { label: "操作", value: "opt" }
        ],
        "3": [
          { label: "企业名称", value: "companyname" },
          { label: "所在地区", value: "areaName" },
          { label: "企业类型", value: "companyType" },
          { label: "企业规模", value: "companyScale" },
          { label: "审批人", value: "auditor" },
          { label: "审核时间", value: "submittime" },
          { label: "操作", value: "opt" }
        ],
        "4": [
          { label: "企业名称", value: "companyname" },
          { label: "所在地区", value: "areaName" },
          { label: "企业类型", value: "companyType" },
          { label: "企业规模", value: "companyScale" },
          { label: "失效时间", value: "bountyOfPeriod" },
          { label: "操作", value: "opt" }
        ]
      },
      checkFlag: false,
      info: {}
    };
  },
  mounted() {
    this.checkHuman = localStorage
      .getItem("checkHuman")
      .toString()
      .replace(/"/g, "");
    this.tableColumn = this.columnObj[this.current];
    console.log(this.tableColumn);
    this.getData();
    this.getList('1');
  },
  methods: {
    handleSizeChange(val) {
      this.Page.pageSize = val;
      this.getList();
    },
    pageChange(p) {
      let page = p.toString();
      this.getList(page);
    },
    clickTab(item, index) {
      this.current = item.value;
      //   this.status = this.statusList[index];
      this.tableColumn = this.columnObj[item.value];
      this.Page.pageSize = 10;
      this.getList("1");
    },
    getList(page) {
      this.loading=true
      console.log(2);
      let params = {
        type: this.current,
        pageNum: page || "1",
        pageSize: this.Page.pageSize
      };
      console.log(params);
      this.$axios
        .post("/app/v1/BountyBack/selectAuditCompany", {
          type: this.current,
          pageNum: page || "1",
          pageSize: this.Page.pageSize
        })
        .then(res => {
          console.log(res);
          if (res.data.message === "success.") {
            this.loading=false
            let result = res.data.data;
            if(result.list===null){
              this.tableData=[]
              return 
            }else{
              console.log(result);
              if (this.current == 1) {
                this.$emit("update:totalNum", result.pageTotal);
              }
              this.Page.total = Number(result.pageTotal);
              result.list.map(item => {
                item.areaName =
                  item.provincename + "-" + item.cityname + "-" + item.areaname;
                // 企业规模
                let companyScale = this.companyScaleList.filter(item1 => {
                  if (
                    item1.code === item.companysize ||
                    item.companysize == null
                  ) {
                    return item1;
                  }
                });
                item.companyScale = companyScale[0].name;
                // =======================
                let companyType = this.companyTypeList.filter(item2 => {
                  if (
                    item2.code === item.companytype ||
                    item.companytype == null
                  ) {
                    return item2;
                  }
                });
                item.companyType = companyType[0].name;
                // ==============================
                return item;
              });
              this.tableData = result.list;

            }
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
            this.tableData=[]
          }
        });
    },
    // 审核
    check(r) {
      console.log(r);
      this.info = r;
      this.checkFlag = true;
    },
    close() {
      this.checkFlag = false;
      //   if (this.ct5 != '5') {
      //     this.getList(1);
      //   } else if (this.ct5 == '5') {
      //     this.getList2(1)
      //   }
    },
    // 详情
    // 把行对象传给info这个对象，在这个页面里的所有的弹窗都能取货带这个对象里的各个属性值
    details(r) {
      this.info = r;

      this.checkFlag = true;
    },
    getData() {
      this.$axios.get("../../../assets/condition1.json").then(res => {
        this.companyScaleList = res.data.companyRange;
        this.companyTypeList = res.data.companyType;
      });
    }
  }
};
</script>

<style scoped>
.cash-box {
  background-color: #ffffff;
  margin: 0px 18px;
}

.item-cash-title {
  line-height: 60px;
  border-bottom: 1px solid #bfbfbf;
}

.title-icon {
  margin-left: 15px;
  padding-left: 12px;
  border-left: 12px solid #0064e4;
}
.search-nav-box {
  padding-top: 10px;
  height: 0px;
  display: flex;
  background: #fff;
  margin: 0 18px;
  justify-content: space-between;
}
.item-search {
  height: 50px;
  line-height: 50px;
  display: flex;
}
.socialTitle_box,
.socialTitle {
  background: #fff;
  margin: 0 18px;
  /* padding: 0 20px; */
}
.bgcw {
  background-color: #fff;
  height: 600px;
  margin: 0 18px;
}
</style>